import React, {  useState } from "react";
// import { PageHeader } from 'antd';
import { Input,Toast} from "antd-mobile";
import { Button } from 'antd';
import axios from "axios";
import "./index.css";
function Index(props) {
  const [code, setCode] = useState("");
  const [phone, setPhone] = useState("");

  return (
    <div className="waike">
      <div>

         {/* 熊头像 */}
         <div className="group5 flex-row">
              <div className="section1 flex-col" />
              <div className="section2 flex-col" />
            </div>
          <div className="group6 flex-col">
                <div className="block2 flex-col">
                  <img
                  alt="头像"
                    className="image1"
                    src={
                      "https://lanhu.oss-cn-beijing.aliyuncs.com/psp27suyerzsyseffkn9wrofsde5bklrf05ca042-ac03-41ba-b2e7-b8fe6a405bc6"
                    }
                  />
                  <div className="block3 flex-col" />
                </div>
                <img
                alt=""
                  className="image2"
                  src={
                    "https://lanhu.oss-cn-beijing.aliyuncs.com/psc7rovtlxjf9eecgkztmhkcoinseo4ude1c43a41-4dd7-42d4-91de-ffd6d339f44c"
                  }
                />
           </div> 
       
      
      </div>
      {/* 登录 */}
      <div className="group9 flex-col">
            <div className="box4 flex-row">
              <span className="text3">+86</span>
              <div className="box5 flex-col" />
              {/* <span className="text4">请输入手机号</span> */}
              <Input className="text4" 
               maxLength = {11}
               onChange={(val) => {
                setCode(val);
              }}/>
            </div>
            <img
            alt=""
              className="image3"
              src={
                "https://lanhu.oss-cn-beijing.aliyuncs.com/pst040poxc6k7ypvj7d90u18rucskhiv8focb885cbb-dda7-4b5c-8e03-2642d3044901"
              }
            />
            <div className="text-wrapper1 flex-row justify-between">
              {/* <span className="text5" contenteditable="true">请输入验证码</span> */}
              <Input className="text5" value={code}
              onChange={(val) => {
                setCode(val);
              }}/>
              {/* <span  className="text6">获取验证码</span> */}
              <Button  className="text6"
               onClick={() =>{
                // console.log(phone.length);
                // console.log(phone);
                //正则判断手机号
                let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if(!phoneReg.test(phone)){
                  // console.log("请输入正确的手机号");
                  Toast.show({
                        content: '请输入正确的手机号!',
                      })
                }else{
                    axios.post(`/api/user/LoginCode?phone=${phone}`).then((res)=>{
                      // console.log(res);
                      Toast.show({
                        content: '已发送验证码，请注意查收!',
                      })
                    })
                  }
               }}
              >获取验证码</Button>

            </div>
            <div className="box6 flex-col" />

            {/* 登录按键 */}
            <button
              className="button1 flex-col"
              onClick={() => {
                console.log(code,phone);
                axios.post(`/api/user/Login?code=${code}&phone=${phone} `).then((res) => {
                  console.log(res);
                  console.log(res.data.msg);
                   if(res.data.msg == "success"){
                    props.history.push("/");
                 }
                });
               
                
              }}

            >
              <span className="text7">登录</span>
            </button>
            <div className="text-wrapper2 flex-row justify-between">
              <Button className="text8">手机号快捷登录</Button>
              <Button className="text9">忘记密码？</Button>
            </div>
          </div>
    </div>
  );
}

export default Index;
